<template>
  <div>
    <div class="container">
      <!-- 上 -->
      <div class="top">
        <el-row>
          <el-col :span="3">
            <img class="logo" :src="info.in_icon" alt="" />
          </el-col>
          <el-col :span="13" class="datum">
            <ul>
              <li class="li" style="font-size: 20px">{{ info.in_name }}</li>
              <li class="li">{{ info.in_bid }}</li>
              <li class="li" style="display: flex">
                <p style="margin-right: 10px">大小:{{ info.in_size }}MB</p>
                <p>版本:{{ info.in_bsvs }}</p>
              </li>
              <li class="li">适用于{{ info.in_form }}系统的设备</li>
            </ul>
          </el-col>
          <el-col
            :span="4"
            style="display: flex; height: 150px; align-items: center"
          >
            <el-button
              class="uploadButton"
              @click="
                $router.push(
                  `/uplodapp?id=${info.id}&witheName=${info.in_name}`
                )
              "
              >上传新版本</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- 下 -->
      <div class="bottom">
        <el-menu
          style="padding: 10px"
          :default-active="active"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="message" style="border: 1px solid #eee">
            <span slot="title">应用信息</span>
          </el-menu-item>
          <el-menu-item index="merge" style="border: 1px solid #eee">
            <span slot="title">应用合并</span> </el-menu-item
          ><el-menu-item index="versions" style="border: 1px solid #eee">
            <span slot="title">历史版本</span>
          </el-menu-item>
          <el-menu-item index="statistics" style="border: 1px solid #eee">
            <span slot="title">数据统计</span>
          </el-menu-item>
        </el-menu>

        <div class="content">
          <merge :list="info" v-if="active === 'merge'" />
          <message :list="info" v-else-if="active === 'message'" />
          <statistics
            :uploadList="uploadList"
            v-else-if="active === 'statistics'"
          />
          <versions
            :uploadList="uploadList"
            v-else-if="active === 'versions'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppDetails } from "@/api/App";
import merge from "./Compontent/merge.vue";
import message from "./Compontent/message.vue";
import statistics from "./Compontent/statistics.vue";
import versions from "./Compontent/versions.vue";
export default {
  data() {
    return {
      //导航栏
      active: "message",
      //信息数据
      info: {},
      //上传列表
      uploadList: [],
    };
  },
  created() {
    // 合并/查看
    this.active = this.$route.params.page;
    // console.log(this.$route.params.id);
    this.getDetails(this.$route.params.id);
  },
  methods: {
    //导航栏对应-内容切换
    handleMenuSelect(index) {
      this.active = index;
    },
    async getDetails(id) {
      const res = await getAppDetails(id);
      this.info = res.data.app_info;
      this.uploadList = res.data.upload_list;
      //包大小计算
      this.info.in_size = this.info.in_size / (1024 * 1024);
      this.info.in_size = this.info.in_size.toFixed(2);
      this.uploadList.forEach((v) => {
        v.in_size = v.in_size / (1024 * 1024);
        v.in_size = v.in_size.toFixed(2);
        v.in_size = v.in_size + " " + "MB";
      });
    },
  },
  components: {
    merge,
    message,
    statistics,
    versions,
  },
};
</script>

<style scoped>
.uploadButton {
  color: #eef0f6;
  background: linear-gradient(#8e8cf9, #56a1f9);
}
.PreviewButton {
  color: #eef0f6;
  background: linear-gradient(#ff5236, #f9aa56);
}

.li {
  font-size: 15px;
  font-family: inherit;
  line-height: 25px;
  color: #000;
}
.logo {
  border-radius: 10%;
  margin: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid #eef0f6;
}
.datum {
  margin: 20px;
}
.content {
  flex: 1;
  margin: 20px;
}

.bottom {
  display: flex;
  width: 1200px;
  height: 700px;
}
.logo {
  margin-top: 15px;
}
.top {
  width: 1200px;
  margin: 10px;
  height: 150px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
